<script setup>
import { ref,watch } from 'vue';
import { useRoute } from 'vue-router';
import { getGoodsByCate,getGoodsByName } from '@/api/home';
const route = useRoute()
const GoodsList = ref(undefined)
async function getGoodsList() {
   if(route.query.cid){
      var {data} = await getGoodsByCate(route.query.cid)
   }else{
      var {data} = await getGoodsByName(route.query.name)
   }
   console.log(data);
   GoodsList.value = data
}
watch(() => route.query.name,() => getGoodsList())
getGoodsList()
</script>

<template>
   <div class="search" style="background-color: #f5f5f5;">
      <div class="bread">
         <div class="content">
            <router-link to="/home">首页</router-link> > 全部结果
         </div>
      </div>
      <ul class="sub-cate">
         <div class="content">
            <li>
               <a href="#">分类：</a>
            </li>
            <li>
               <a href="#" style="color: #30b2f5;">全部</a>
            </li>
         </div>

      </ul>
      <div class="content" v-if="GoodsList?.length > 0">
         <ul class="screen">
            <li>
               <a href="#">综合</a>
            </li>
            <li>
               <a href="#">新品</a>
            </li>
            <li>
               <a href="#">销量</a>
            </li>
            <li>
               <a href="#">价格 <span style="vertical-align: top;">↑</span></a>
            </li>
         </ul>
         <GoodsItem :goodsList="GoodsList" ></GoodsItem>
      </div>
      <div class="empty" v-else>
            暂时没有该类型商品，呼叫作者去添加吧
         </div>
   </div>
</template>

<style scoped lang="less">
.empty{
   height: 300px;
   background-color: #fff;
   text-align: center;
   font-size: 20px;
   color: #757575;
}
.screen{
   display: flex;
   height: 70px;
   padding: 25px 0;
   li{
      padding: 0 30px;
      border-right: 1px solid #e0e0e0;
      &:nth-last-of-type(1){
         border-right: none;
      }
      a{
         color: #424242;
         line-height: 20px;
      }
   }
}
.sub-cate {
   height: 84px;
   background-color: #fff;

   .content {
      display: flex;
      li {
      height: 100%;
      width: 100px;

      a {
         display: inline-block;
         color: #757575;
         height: 100%;
         width: 100%;
         line-height: 84px;
      }
   }
   }

 

}

.bread {
   height: 40px;
   background-color: #f5f5f5;
   font-size: 13px;
   color: #757575;
   line-height: 40px;

   a {
      color: #757575;

   }
}
</style>
